<template>
  <el-form  :inline="false" class="elForm" :class="isEdit?'':'formItem'" label-position="left">
    <!--基础信息-->
    <el-card class="box-card"  shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">车辆信息</span>
      </div>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="车架号:">
            <span>{{ detailForm.vinNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车牌号:">
            <span>{{ detailForm.carNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="品牌/车系/车型:">
            <span>
              {{ detailForm.brandName }}{{ detailForm.seriesName ? '/' + detailForm.seriesName : '' }}
              {{ detailForm.modelName ? '/' + detailForm.modelName : '' }}
            </span>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="车辆产权:">
            <span>{{ detailForm.propertyRightName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆归属:">
             <span>{{ detailForm.ascription }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单编号:">
            <span>{{ detailForm.orderCode }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="客户名称:">
            <span>{{ detailForm.customerName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品类型:">
            <span>{{handleCcomputed(dict.type.contract_type,detailForm.contractType)}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆性质:">
            <span>{{handleCcomputed(dict.type.car_nature, detailForm.carNature) }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="车辆状态:">
            <span>{{handleCcomputed(dict.type.car_business_type, detailForm.businessType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆登记日期:">
            <span>{{detailForm.registerTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="座位数:">
            <span>{{ detailForm.seatNum }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="燃油类型:">
            <span> {{ handleCcomputed(dict.type.fuel_type, detailForm.fuelType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上次年检线上/线下:" >
            <span>{{handleCcomputed(dict.type.online_offline, detailForm.lastOnlineOffline) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上次年检到期日:">
            <span>{{ detailForm.inspectionLastTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>

    </el-card>
  </el-form>
</template>

<script>
export default {
  name: 'annalBasiInfo',

  dicts: ['car_business_type', 'work_order_type', 'quota_rent_type',
    'car_nature', 'inspection_status','online_offline','fuel_type','contract_type'],


  props: {
    value: {
      type: Object,
      default:{}
    },
    state: {
      type: String,
      default: "",
    },

  },

  computed:{
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    handleCcomputed(){
      return function (objData,val){
        let label = ''
        let index = objData.findIndex(a=>a.value == val)
        if(index !== -1){
          label = objData[index].label
        }
        return label
      }
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool
    }
  },


  mounted() {
  }

};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";

.elForm {
  .el-form-item {
    width: 100%;
  }
}
</style>


